<template>
  <div class="panel-main">
    <div class="panel-row">
      <div>标题：</div>
      <Input :value="model?.label" class="panel-input"/>
    </div>
    <div class="panel-row">
      <div>宽度：</div>
      <Input :value="width" type="number" class="panel-input" @change="change($event, 'width')"/>
    </div>
    <div class="panel-row">
      <div>高度：</div>
      <Input :value="height" type="number"  class="panel-input"  @change="change($event, 'height')"/>
    </div>
    <div class="panel-row">
      <div>圆角：</div>
      <Input :value="model?.radius"  type="number"  class="panel-input"  @change="change($event, 'radius')"/>
    </div>
    <div class="panel-row">
      <div>填充色：</div>
      <Input :value="model?.fillColor" class="panel-input" type="color"  @change="change($event, 'fillColor')" />
    </div>
    <div class="panel-row">
      <div>透明度：</div>
      <Input :value="model?.fillOpacity"  type="number"  class="panel-input"  @change="change($event, 'fillOpacity')"/>
    </div>
    <div class="panel-row">
      <div>边框宽度：</div>
      <Input :value="model?.lineWidth" class="panel-input" type="number"  @change="change($event, 'lineWidth')" />
    </div>
    <div class="panel-row">
      <div>是否虚线显示：</div>
      <Checkbox :value="model?.isDash" @change="change($event, 'isDash', 'checkbox')"/>
    </div>
    <div class="panel-row">
      <div>边框颜色：</div>
      <Input :value="model?.color" class="panel-input" type="color"  @change="change($event, 'color')" />
    </div>
  </div>

</template>
<script>
import {Checkbox, Input} from "ant-design-vue";

export default {
  name: 'App',
  props: {
    selectedShape: {
      type: Object
    }
  },

  watch: {
    selectedShape: {
      handler: function(shape){
        const item = shape.graph?.findById(shape.itemId);
        this.model = item?.getModel();
        this.width = this.model?.size[0];
        this.height = this.model?.size[1];
      },
      deep: true
    }
  },

  components: {
    Checkbox,
    Input,
  },

  data(){
    return {
      model:{},
      width: 0,
      height: 0
    }
  },

  mounted() {
  },

  methods: {
    change(e, key, type){
      switch (type){
        case 'input': this.setValue(e.target.value, key); break;
        case 'checkbox':  this.setValue(e.target.checked, key); break;
        default:
          this.setValue(e.target.value, key);
          break;
      }
      const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
      this.$emit('change', item.getModel());
    },

    setValue(value, key){
      if(key === 'width' || key === 'height'){
        this[key] = value;
        this.model.size[key === 'width' ? 0 : 1] = parseInt(value);
      }else{
        this.model[key] = value
      }
    },
  }
}
</script>
<style scoped lang="scss">

</style>